<template>
    <div>
        <h3>门店修改</h3>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right"><b>*</b>店名</td>
                    <td>
                        <input type="text" v-model="querinfo.ShopName">
                    </td>
                </tr>

                <tr>
                    <td align="right"><b>*</b>营业时间</td>
                    <td>
                        <input type="text" v-model="querinfo.Shijian">
                    </td>
                </tr>

                <tr>
                    <td align="right"><b>*</b>服务范围</td>
                    <td>
                        <select v-model="querinfo.Fuwu">
                            <option value="">请选择</option>
                            <option value="早餐早点">早餐早点</option>
                            <option value="提前入住">提前入住</option>
                            <option value="免费打扫">免费打扫</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <td align="right"><b>*</b>店主</td>
                    <td>
                        <input type="text" v-model="querinfo.DianZhu">
                    </td>
                </tr>

                <tr>
                    <td align="right"><b>*</b>联系电话</td>
                    <td>
                        <input type="text" v-model="querinfo.Phone">
                    </td>
                </tr>

                <tr>
                    <td align="right"><b>*</b>门店介绍</td>
                    <td>
                        <textarea cols="30" rows="5" v-model="querinfo.Desc"></textarea>
                    </td>
                </tr>

                <tr>
                    <td align="right"><b>*</b>门店地址</td>
                    <td>
                        <input type="text" v-model="querinfo.Address">
                    </td>
                </tr>

                <tr>
                    <td align="right"><b>*</b>状态</td>
                    <td>
                        <input type="radio" name="state" :value="1" v-model="querinfo.State">启用
                        <input type="radio" name="state" :value="0" v-model="querinfo.State">禁用
                    </td>
                </tr>

                <tr>
                    <td align="right"><b>*</b>门店logo</td>
                    <td>
                        <input type="file" @change="img" >
                        <img :src="querinfo.Logo" width="150" height="100" v-if="querinfo.Logo!=''">
                    </td>
                </tr>

                <tr>
                    <td align="right"><b>*</b>门店图片</td>
                    <td>
                        <input type="file" @change="img1">
                        <img :src="querinfo.Photo" width="150" height="100" v-if="querinfo.Photo!=''">
                    </td>
                </tr>

                <tr>
                    <td align="right"><b></b></td>
                    <td>
                        <input type="button" value="修改" @click="ok" class="btn btn-primary">
                        
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import moment from 'moment';
import { idText } from 'typescript';
import { ref,reactive,onMounted, resolveDirective } from 'vue';
import { useRoute,useRouter } from 'vue-router';
const route=useRoute();
const router=useRouter();

let querinfo:any=reactive({
  "ShopName": "",
  "Shijian": "",
  "Fuwu": "",
  "DianZhu": "",
  "Phone": "",
  "Desc": "",
  "Address": "",
  "State": "",
  "Logo": "",
  "Photo": "",
})
onMounted(()=>{
    detail();
})

const detail=()=>{
    axios({
        method:"get",
        url:"/api/Month/Detail",
        params:{
            id:route.query.id
        }
    })
    .then(res=>{
        Object.assign(querinfo,res.data)
    })
    .catch(err=>{
        console.log(err)
    })
}


const ok=()=>{
    axios({
        method:"post",
        url:"/api/Month/UpdShopModel",
        data:querinfo
    })
    .then(res=>{
        if(res.data==-1){
            alert('门店名称重复')
        }
        else if(res.data>0){
            alert('修改成功');
            router.push('/shopshow');
        }
        else{
            alert('修改失败')
        }
    })
    .catch(err=>{
        console.log(err);
    })
}



const img=(e:any)=>{
    var d=e.target.files[0];
    var s=new FormData();
    s.append('file',d);
    axios({
        method:"post",
        url:"/api/Month/Img",
        data:s
    })
    .then(res=>{
        if(res.data=="图片格式错误"){
            alert('图片格式错误')
        }
        else if(res.data=="超过2MB"){
            alert('超过2MB')
        }
        else{
            querinfo.Logo=res.data
        }
    })
}

const img1=(e:any)=>{
    var d=e.target.files[0];
    var s=new FormData();
    s.append('file',d);
    axios({
        method:"post",
        url:"/api/Month/Img",
        data:s
    })
    .then(res=>{
        if(res.data=="图片格式错误"){
            alert('图片格式错误')
        }
        else if(res.data=="超过2MB"){
            alert('超过2MB')
        }
        else{
            querinfo.Photo=res.data
        }
    })
}

</script>









<style scoped>
b{
    color: red;
}
</style>